<template>
    <div>
        <q-dialog ref="dialog" @hide="onDialogHide" position="right">
            <div class="add-detail bg-white q-dialog-plugin q-pa-sm">
                <div class=" profile-head    ">
                    <div class="row">
                        <div class="col">
                            <div class="text-h6">
                                <q-icon name="perm_identity" size="25px"/>
                                详情
                            </div>
                        </div>
                        <div class="col-auto">
                            <q-btn flat round  icon="close" @click="onCancelClick"/>
                        </div>
                    </div>
                    <div class="row">
                    </div>

                </div>
                <q-separator spaced/>
                <div class="row profile-body ">
                    <q-scroll-area class="profile-scroll-detail q-pa-sm" :thumb-style="thumbStyle">
                        <ProfileInfo :userInfo="userInfo"/>
                    </q-scroll-area>
                </div>
            </div>
        </q-dialog>
    </div>

</template>

<script>
  import ProfileInfo from '../profile/user-info/userInfo.vue'

  export default {
    components: {ProfileInfo},
    props: {
      // ...你自定义的属性
      userInfo:{
        type:Object,
      }
    },
    data () {
      return {
      }
    },
    methods: {
      // 以下方法是必需的
      // (不要改变它的名称 --> "show")
      show () {
        this.$refs.dialog.show()
      },

      // 以下方法是必需的
      // (不要改变它的名称 --> "hide")
      hide () {
        this.$refs.dialog.hide()
      },
      onDialogHide () {
        // QDialog发出“hide”事件时
        // 需要发出
        this.$emit('hide')
      },

      onOKClick () {
        // 按OK，在隐藏QDialog之前
        // 发出“ok”事件（带有可选的有效负载）
        // 是必需的
        this.$emit('ok')
        // 或带有有效负载：this.$emit('ok', { ... })

        // 然后隐藏对话框
        this.hide()
      },

      onCancelClick () {
        // 我们只需要隐藏对话框
        this.hide()
      }
    },
    computed: {
      thumbStyle () {
        return {
          right: '2px',
          borderRadius: '5px',
          backgroundColor: '#4caf50',
          width: '5px',
          opacity: 0.75
        }
      }
    }
  }
</script>
<style scoped>

    .profile-scroll-detail {
        min-height: 70vh;
        width: 100%;
    }

    .q-dialog-plugin::-webkit-scrollbar { /*滚动条整体样式*/
        width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
    }


    .add-detail {
        /*min-height: 400px;*/
        min-height: 80vh;
        width: 300px;
    }

    .profile-head {
        height: 10%;
    }

    .profile-body {
        height: 90%;
        width: 100%;
    }
</style>


